<template>
    <div class="Ffooter">
      <footer >
        <ul>
          <li class="on"><router-link to="/"><i></i><span>首页</span></router-link></li>
          <li class="on-2"><router-link to="/"><i></i><span>财富</span></router-link></li>
          <li class="on-3"><router-link to="/"><i></i><span>口碑</span></router-link></li>
          <li class="on-4"><router-link to="/Friends"><i></i><span>朋友</span></router-link></li>
          <li class="now"><router-link to="/Mine"><i></i><span>我的</span></router-link></li>
        </ul>
      </footer>
    </div>
</template>

<script>
    export default {
        name: "app-ffooter"
    }
</script>

<style scoped>
  body,div,ul,p,a,li,span,i,img,input,form{
    margin: 0;
    padding: 0;
  }
  body{
    font: 12px/1 微软雅黑;
    background: #f5f5f5;
  }
  li{
    list-style: none;
  }
  a{
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  a:hover{
    text-decoration: none;
  }
  footer{
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #ddd;
  }
  footer ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  footer ul li{
    width: 50%;
    padding: .8rem 0;
    text-align: center;
    font-size: 0.8rem;
  }
  footer ul li a{
    text-align: center;
    display: inline-block;
    width: 50%;
  }
  footer ul li i{
    display: inline-block;
    width: 2rem;
    height: 2rem;
  }
  .on a i{
    display: block;
    background: url(../../static/img/mine/mine_01.jpg) no-repeat;
    background-size: 100%;
  }
  .on-2 i{
    display: block;
    background: url(../../static/img/voucher_center/voucher_center_67.jpg) no-repeat;
    background-size: 100%;
  }
  .on-3 i{
    display: block;
    background: url(../../static/img/voucher_center/voucher_center_70.jpg) no-repeat;
    background-size: 100%;
  }
  .on-4 i{
    display: block;
    background: url(../../static/img/friend_03.jpg) no-repeat;
    background-size: 100%;
  }
  .now a i{
    display: block;
    background: url(../../static/img/voucher_center/voucher_center_79.jpg) no-repeat;
    background-size: 100%;
  }
  ul.f-list  li span{
    display: inline-block;
    width: 100%;
  }
  ul.f-list  li.on a{
    color: #29a1f7;
  }
</style>
